<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="img/TuringMaker.ico">
  <title>图灵创客</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  <link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />	
  <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static" role="navigation">
    <div class="container">
      <div class="row">
        <!-- logo -->
        <div class="col-xs-2 col-sm-2 col-md-2">
          <a class="navbar-brand site-logo" href="index.html"><span>TuringMaker</span></a>
        </div>
        <!-- navbar -->
        <div class="col-xs-10 col-sm-10 col-md-10">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-main-navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>

          <div class="collapse navbar-collapse" id="my-main-navbar">
            <ul class="nav nav-pills navbar-right" role="tablist">
              <li role="presentation" class="active"><a href="#">创客平台</a></li>
              <li role="presentation"><a href="community.html">社区交流</a></li>
              <li role="presentation"><a href="shopping.html">电子商务</a></li>
              <li role="presentation"><a href="education.html">教育机构</a></li>
              <li class="btn-group">
                <a  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="glyphicon glyphicon-user" style="color:#6666FF;" aria-hidden="true"></span>
                  <span class="caret" style="color:#6666FF;"></span>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">登陆</a></li>
                  <li><a href="#">注册</a></li>
                  <!-- <li><a href="#">Something else here</a></li> -->
                  <li role="separator" class="divider"></li>
                  <li><a href="#">离开</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <!-- end row -->
    </div>
  </nav>
  <!-- /Navigation -->

  <div class="breadcrumb">
    <h2>Gallery</h2>
  </div>

  <section id="section-works" class="section appear clearfix">
    <div class="container">						
      <div class="row">
        <nav id="filter" class="col-md-12 text-center">
          <ul>
            <li><a href="#" class="current btn-theme btn-small" data-filter="*">All</a></li>
            <li><a href="#"  class="btn-theme btn-small" data-filter=".webdesign" >Events</a></li>
            <li><a href="#"  class="btn-theme btn-small" data-filter=".photography">Photography</a></li>
            <li ><a href="#" class="btn-theme btn-small" data-filter=".print">Family</a></li>
          </ul>
        </nav>

        <div class="col-md-12">
          <div class="row">
            <div class="portfolio-items isotopeWrapper clearfix" id="3">							  
              <article class="col-md-4 isotopeItem webdesign">
                <div class="portfolio-item">
                  <div class="wow rotateInUpLeft" data-animation-delay="4.8s">
                    <img src="img/portfolio/1.jpg" alt="welcome" />
                  </div>
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 1</a></h5>
                      <a href="img/portfolio/1.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem photography">
                <div class="portfolio-item">
                  <div class="wow bounceIn">
                    <img src="img/portfolio/2.jpg" alt="" />
                  </div>
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 2</a></h5>
                      <a href="img/portfolio/2.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem photography">
                <div class="portfolio-item">
                  <div class="wow rotateInDownRight">
                    <img src="img/portfolio/3.jpg" alt="" />
                  </div>	
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 3</a></h5>
                      <a href="img/portfolio/3.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem print">
                <div class="portfolio-item">
                  <div class="wow rotateInUpLeft">
                    <img src="img/portfolio/4.jpg" alt="" />
                  </div>	
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 4</a></h5>
                      <a href="img/portfolio/4.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem photography">
                <div class="portfolio-item">
                  <div class="wow bounceIn">
                    <img src="img/portfolio/5.jpg" alt="" />
                  </div>
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 5</a></h5>
                      <a href="img/portfolio/5.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem webdesign">
                <div class="portfolio-item">
                  <div class="wow rotateInDownRight">
                    <img src="img/portfolio/6.jpg" alt="" />
                  </div>		
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 6</a></h5>
                      <a href="img/portfolio/6.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem print">
                <div class="portfolio-item">
                  <div class="wow rotateInUpLeft">
                    <img src="img/portfolio/7.jpg" alt="" />
                  </div>
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 7</a></h5>
                      <a href="img/portfolio/7.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem photography">
                <div class="portfolio-item">
                  <div class="wow bounceIn">
                    <img src="img/portfolio/8.jpg" alt="" />
                  </div>	
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 8</a></h5>
                      <a href="img/portfolio/8.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>										   
                  </div>
                </div>
              </article>

              <article class="col-md-4 isotopeItem print">
                <div class="portfolio-item">
                  <div class="wow rotateInDownRight">
                    <img src="img/portfolio/9.jpg" alt="" />
                  </div>
                  <div class="portfolio-desc align-center">
                    <div class="folio-info">
                      <h5><a href="#">Project name 9</a></h5>
                      <a href="img/portfolio/9.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<footer>
  <div class="inner-footer">
    <div class="container">
      <div class="row">
        <div class="col-md-4 f-about">
          <a href="index.html"><h1>关于我们</h1></a>
          <p>武汉图灵创客科技有限公司是中国湖北省武汉市洪山区的一家做创新教育社交的创业型公司。我们致力于建设国内第一个K12创新教育社交平台，让创新流行起来，为中国的青少年提供一个创新的平台，充分提高K12学生的创新能力。</p>
        </div>

        <div class="col-md-4 l-posts">
          <h3 class="widgetheading">友情链接</h3>
          <ul>
            <li><a href="http://getbootstrap.com/">Bootstrap</a></li>
            <li><a href="http://www.easylinkin.com/">武汉慧联无限科技有限公司</a></li>
            <li><a href="http://www.hust.edu.cn/">华中科技大学</a></li>
            <!-- <li><a href="#">Wow, this is fourth post title</a></li> -->
          </ul>
        </div>

        <div class="col-md-4 f-contact">
          <h3 class="widgetheading">联系我们</h3>
          <a href="#"><p><i class="fa fa-envelope"></i> turingmaker@qq.com</p></a>
          <p><i class="fa fa-qq"></i>  3512191169</p>
          <p><i class="fa fa-phone"></i>  +086 132 xxxx xxxx</p>
          <p><i class="fa fa-home"></i> TuringMaker inc  |  武汉市洪山区珞瑜路1037号 <br>中国湖北省武汉市</p>
        </div>

      </div>
    </div>
  </div>

  <div class="last-div">
    <div class="container">
      <div class="copyright">
        © Copyright 2016 武汉图灵创客科技有限公司 | <a href="http://turingmaker.com">TuringMaker</a>
      </div>
      <ul class="social-network">
        <li><a href="#" data-placement="top" title="qq"><i class="fa fa-qq" aria-hidden="true"></i></a></li>
        <li><a href="#" data-placement="top" title="Weibo"><i class="fa fa-weibo fa-1x"></i></a></li>
        <li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-wechat fa-1x"></i></a></li>
        <li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-linkedin fa-1x"></i></a></li>
        <li><a href="#" data-placement="top" title="Google plus"><i class="fa fa-google-plus fa-1x"></i></a></li>
      </ul>
    </div>
  </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/functions.js"></script>
<script>
  wow = new WOW(
  {

  }	) 
  .init();
</script>
</body>
</html>